<script setup>
import { ref, onMounted } from "vue";
import "@material/web/list/list.js";
import "@material/web/list/list-item.js";
import { getMonthName } from "../util";

const props = defineProps(["month"]);
const emit = defineEmits(["change"]);
const monthList = ref(null);
const items = ref(null);

onMounted(() => {
  const month = props.month;
  if (month === undefined) {
    return;
  }

  setTimeout(() => {
    let top = 0;
    for (let i = 0; i < 12; i++) {
      if (i == month) {
        top += items.value[i].offsetHeight / 2;
        break;
      } else {
        top += items.value[i].offsetHeight;
      }
    }
    top -= monthList.value.clientHeight / 2;
    monthList.value.scrollTo({
      top,
      left: 0,
      behavior: "instant"
    });
  }, 0);
});
</script>

<template>
  <md-list class="month-list" ref="monthList">
    <md-list-item v-for="i in 12" type="button" @click="$emit('change', i - 1)" ref="items">
      <div slot="start" class="start" role="presentation">
        <md-icon v-if="month + 1 == i">check</md-icon>
        <div class="placeholder" v-else></div>
      </div>
      <div slot="headline">
        {{ getMonthName(i - 1) }}
      </div>
    </md-list-item>
  </md-list>
</template>

<style scoped>
.month-list {
  padding: 0;
  overflow-y: auto;
  height: 100%;
}

.start {
  display: flex;
  align-items: center;
}

.placeholder {
  display: inline-block;
  height: 24px;
  width: 24px;
}
</style>